<template>
  <div class="home_index">
      <div class="home" v-if="!utils.isMobile()">
        <div>
          <img class="img" src="../assets/NBI-logo.png" alt="">
          <span>NBI</span>
        </div>
        <div>
          <div @click="indexCli(0,'homePage')">
            <span :class="sleIndex == 0?'colorFEDD4F':''">{{$t('user.home')}}</span>
            <div v-if="sleIndex == 0" class="line"></div>
          </div>
          <div @click="indexCli(1,'farmNBIPage')">
            <span :class="sleIndex == 1?'colorFEDD4F':''">{{$t('user.mining')}}</span>
            <div v-if="sleIndex == 1" class="line"></div>
          </div>
          <div @click="indexCli(2,'farmQaPage')">
            <span :class="sleIndex == 2?'colorFEDD4F':''">{{$t('user.QA')}}</span>
            <div v-if="sleIndex == 2" class="line"></div>
          </div>
          <div @click="indexCli(3,'farmRulePage')">
            <span :class="sleIndex == 3?'colorFEDD4F':''">{{$t('user.rules')}}</span>
            <div v-if="sleIndex == 3" class="line"></div>
          </div>
        </div>
        <newbestLanguage></newbestLanguage>
        <!-- <div class="lineWallet" @click="walletConnect">{{$t('user.ConnectWallet')}}</div> -->
      </div>
      <div class="home" v-else>
        <div class="home-nav" v-if="showNav">
          <img @click="showNav = false" src="../assets/layer-icon-close.png" alt="">
          <div class="home-nav-title">
            <div @click="indexCli(0,'homePage')">
              <span :class="sleIndex == 0?'colorFEDD4F':''">{{$t('user.home')}}</span>
              <div v-if="sleIndex == 0" class="line"></div>
            </div>
            <div @click="indexCli(1,'farmNBIPage')">
              <span :class="sleIndex == 1?'colorFEDD4F':''">{{$t('user.mining')}}</span>
              <div v-if="sleIndex == 1" class="line"></div>
            </div>
            <div @click="indexCli(2,'farmQaPage')">
              <span :class="sleIndex == 2?'colorFEDD4F':''">{{$t('user.QA')}}</span>
              <div v-if="sleIndex == 2" class="line"></div>
            </div>
            <div @click="indexCli(3,'farmRulePage')">
              <span :class="sleIndex == 3?'colorFEDD4F':''">{{$t('user.rules')}}</span>
              <div v-if="sleIndex == 3" class="line"></div>
            </div>
          </div>
        </div>
        <div class="home-top">
          <div>
            <img class="img1" src="../assets/NBI-logo.png" alt="">
            <span>NBI</span>
          </div>
          <div>
            <newbestLanguage style="display: inline-block;"></newbestLanguage>
            <a-icon @click="showNav = true" type="menu" />
          </div>
        </div>
      </div>
      <keep-alive>
        <component :is="targetComp"/>
      </keep-alive>
      <div :class="targetComp == 'homePage'?'bottom-icon top670':'bottom-icon bottom-noposition'">
        <a target="_blank" href="https://t.me/newbest_Asia">
          <img src="../assets/bottom-icon-telegram.png" alt="">
        </a>
        <a target="_blank" href="https://twitter.com/NewBestAsia1">
          <img src="../assets/bottom-icon-twitter.png" alt="">
        </a>
        <a target="_blank" href="https://medium.com/@nbcfancs">
          <img src="../assets/bottom-icon-medium.png" alt="">
        </a>
      </div>
      <!-- <div @click="walletConnect" v-if="utils.isMobile()" class="home-wallt">
        <img src="../assets/wallet-mobile.png" alt="">
        Wallet
      </div>       -->
  </div>
</template>

<script>
  import homePage from './homePage'
  import farmQaPage from './farmQaPage'
  import newbestLanguage from './public/newbestLanguage'
  import farmNBIPage from './farmNBIPage'
  import farmRulePage from './farmRulePage'
  
export default {
  name: 'homeIndex',
  data () {
    return {
      targetComp:'homePage',
      sleIndex:0,
      showNav:false,
    }
  },
  components:{
    homePage,
    farmQaPage,
    newbestLanguage,
    farmNBIPage,
    farmRulePage
  }, 
  mounted(){
    var id = window.location.href;
    if(id.indexOf("farmRulePage")!=-1){
      this.targetComp = 'farmRulePage';
    }
  },
  methods: {
    indexCli(num,str){
      if(this.sleIndex == num){
        return
      }else{
        this.showNav = false;
        this.sleIndex = num;
        this.targetComp = str;
        if(num == 1){
          localStorage.setItem('ming',true)
        }
      }
    },
    async walletConnect(){
      var tronWeb = window.tronWeb;
        if (tronWeb && tronWeb.defaultAddress.base58) {            
            
        }else{
            alert(this.$t('user.ConnectNotSuccessed'))
        }
    }
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">  
  .colorFEDD4F{
    color: #FEDD4F;
  }
  @media only screen and (min-width: 0px) and (max-width: 639px){
    .top670{
      top: 670px;
      margin-bottom: 40px; 
    }
    .home_index{
      width: 100%;
      z-index: 10;
      .home-wallt{
        width: 94px;
        height: 36px;
        line-height: 36px;
        position: fixed;
        bottom: 110px;
        left: 0px;
        background-color: #FEDD4F;
        border-radius: 0px 6px 6px 0px;
        font-size: 16px;
        font-weight: bold;
        color: #000;
        img{
          width: 22px;
          position: relative;
          top: 7px;
        }
      }
      .home{
        .home-nav{
          width: 100%;
          height: 100vh;
          position: fixed;
          z-index: 1000;
          background-color: rgba(0, 0, 0, 0.9);
          img{
            width: 18px;
            position: absolute;
            right: 20px;
            top: 24px;
          }
          .home-nav-title{
            display: flex;
            flex-direction: column;
            padding-top: 230px;
            >div{
              margin-bottom: 52px;
              position: relative;              
              .line{
                width: 63px;
                margin: 0 auto;
                height: 3px;
                background-color: #FEDD4F;
              }
            }
          }
        }
        .home-top{
          width: 100%;
          position: absolute;
          top: 0px;
          left: 0px;
          z-index: 10;
          padding: 18px 15px;
          line-height: 43px;
          display: flex;
          justify-content: space-between;
          .img1{
            width: 43px;
            margin-right: 9px;
          }
        }
      }
      .bottom-icon{
        width: 100px;
        height: 20px;
        left: calc(50% - 50px);
        position: absolute;
        display: flex;
        justify-content: space-around;
        bottom: 87px;
        img{
          width: 20px;
        }
      }
      .bottom-noposition{
        position: initial;
        margin: 0 auto;
        margin-bottom: 87px;
        margin-top: 80px;
      }
    }
  }
  @media only screen and (min-width: 639px){
    .top670{
      top: 950px;
      margin-bottom: 40px; 
    }
    .home_index{
      width: 1200px;
      margin:0 auto;
      .home{
        display: flex;
        padding-top: 51px;
        line-height: 47px;
        .img{
          width: 47px;
          margin-right: 13px;
        }
        >div:nth-child(2){
          display: flex;
          margin-left: 230px;
          div{
            position: relative;
            margin-right: 96px;
            font-weight: bold;
            font-size: 16px;
            cursor: pointer;
          }
          .line{
            position: absolute;
            left: -10%;
            bottom:32px;
            width: 120%;
            height: 1px;
            background-color: #FEDD4F;
          }
        }
        .lineWallet{
          height: 37px;
          line-height: 17px;
          margin-top: 8px;
          margin-left: 60px;
          padding:10px 20px;
          font-size: 16px;
          border: 1px solid #fff;
          border-radius: 10px;
          cursor: pointer;
        }
      }
      .bottom-icon{
        width: 100px;
        height: 20px;
        left: calc(50% - 50px);
        position: absolute;
        display: flex;
        justify-content: space-around;
        bottom: 87px;
        img{
          width: 20px;
        }
      }
      .bottom-noposition{
        position: initial;
        margin: 0 auto;
        margin-bottom: 87px;
        margin-top: 80px;
      }
    }
  }
</style>
